<template>
  <view>
    <CustmNavBar
      :title="t('Lang_OrderDetail')"
      :bc="bg"
      :color="'#fff'"
      :dark="true"
      :isBack="true"
    >
      <template #right>
        <uv-icon name="kefu-ermai" size="22" color="#bdbebf"></uv-icon>
      </template>
    </CustmNavBar>
    <view class="rtl">
      <view class="ordeer-info">
        <view class="order-head">
          <view class="order-num">
            {{ t("Lang_OrderNumber") }}:{{ orderDetail.orderNo }}
          </view>
          <view class="order-status"> {{ t("Lang_AccountPeriod") }}（A） </view>
        </view>

        <view class="order-time">
          <view class="order-time-item">
            {{ t("Lang_OrderTime") }}:
            <text class="time">
              <!-- 2025.10.24 15:25 -->
              {{ orderDetail.createTime }}
            </text>
          </view>
          <view class="order-time-item">
            {{ t("Lang_ApprovedTime") }}:
            <text class="time">
              <!-- 2025.10.24 15:25 -->
              {{ orderDetail.updateTime }}
            </text>
          </view>
          <view class="order-time-item">
            {{ t("Lang_ShoppingTime") }}:<text class="time"
              >2025.10.24 15:25</text
            >
          </view>
          <!-- 	<view class="order-time-item">
					{{ t("Signed time") }}:<text class="time">2025.10.24 15:25</text>
				</view>
				<view class="order-time-item">
					{{ t("Completed time") }}:<text class="time">2025.10.24 15:25</text>
				</view> -->
        </view>
      </view>
      <view class="address">
        <view class="address_head">
          <view class="title">
            {{ t("Lang_MyShippingAddress") }}
          </view>
          <!-- <view class="icon" @click="goToView('/pages/user/addressDeit')">
					<image class="icon_img" src="/static/images/detail.png" mode="widthFix"></image>
				</view> -->
        </view>
        <view class="address_info">
          <view class="address_img">
            <image class="img" src="/static/log.png" mode="aspectFit"></image>
          </view>
          <view class="address_info_detail">
            <view class="postCode"> Jeddah HK234 </view>
            <view class="address_info_item">
              {{ t("Lang_Consignee") }}: {{ address?.receiverName }}
            </view>
            <view class="address_info_item">
              {{ t("Lang_Phone") }}:{{ address?.receiverPhone }}
            </view>
            <view class="address_info_item">
              {{ t("Lang_Address") }}：{{ address?.receiverProvince
              }}{{ address?.receiverCity }}{{ address?.receiverRegion
              }}{{ address?.receiverDetailAddress }}
            </view>
          </view>
        </view>
      </view>
      <!-- 分期信息 -->
      <view class="box">
        <view class="paymentInfo">
          <view class="title"> {{ t("Lang_PaymentInfo") }}: </view>
          <view class="nt">
            {{ t("Lang_TotalAmount") }}:10,000.00 {{ t("Lang_SR")
            }}{{ t("Lang_Paid") }}: 8,000.00{{ t("Lang_SR") }} ,
            {{ t("Lang_Unpaid") }}: 2,000.00 {{ t("Lang_SR") }}.
          </view>
        </view>
        <view
          class="order-statue-item"
          v-for="(item, i) in orderDetail.orderDetailsList"
          :key="i"
        >
          <view class="order-statue-tip">
            #{{ i + 1 }}
            <view style="margin-left: 10rpx"> {{ t("Lang_Status") }}</view>
            <view>{{ t("Lang_PaymentTime") }}</view>
            <view>{{ t("Lang_TransferScreenshot") }}</view>
          </view>
        </view>
      </view>
      <!-- 订单信息 -->
      <view class="ordeer-info">
        <view class="order-head">
          <view class="num">
            {{ t("Lang_InTotal") }}{{ orderDetail.totalNumber }}
            {{ t("Lang_ItemProduct") }}
          </view>
          <view class="download">
            <!-- <image class="download-img" src="/static/images/exceldownload.png" mode="widthFix"></image> -->
            <uv-icon
              style="margin: 0 20rpx"
              name="/static/images/order/invoice.png"
              size="28"
            ></uv-icon>
            <uv-icon
              name="/static/images/order/toExcel.png"
              size="28"
            ></uv-icon>
          </view>
        </view>
        <view class="goods">
          <view
            class="goods-item"
            @click="goodsInfo(item)"
            v-for="(item, i) in orderDetail.orderDetailsList"
            :key="i"
          >
            <view class="goods-tip">
              #{{ i + 1 }}{{ t("Lang_AccumulatedPaid") }}:{{
                Number(item.marketPrice).toFixed(2)
              }}SAR， {{ t("Lang_PendingPayment") }}:{{
                Number(item.productPrice).toFixed(2)
              }}SAR
              <!-- {{ t("progress") }}:20% -->
            </view>
            <view class="goods-detail">
              <view class="goods-info">
                <view class="top">
                  <view class="post-code">
                    <!-- 05546-02220-LingeLingeLinge -->
                    {{ item.oe }}
                  </view>
                  <view class="price"
                    >{{ Number(item.productPrice).toFixed(2) }} SAR
                  </view>
                </view>
                <view class="bottom">
                  <!-- BRACKET ASSY-ENGINE MOUNTING,TUSSANOUNTING.TUSSAN -->
                  {{ item.productName }}
                </view>
              </view>
              <view class="goods-num">
                {{ item.productQuantity }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 退款信息 -->
      <view class="returnInfo"></view>
      <view class="order-footer">
        <view class="footer-info">
          <view class=""> {{ t("Lang_ProductAmount") }}: </view>
          <view class=""> {{ orderDetail.totalAmount }} </view>
        </view>
        <view class="footer-info">
          <view class=""> WAT: </view>
          <view class=""> {{ orderDetail.vatAmount }} </view>
        </view>
        <view class="footer-info">
          <view class=""> {{ t("Lang_TotalPaidAmount") }}: </view>
          <view class="">
            SAR
            {{
              (
                Number(orderDetail.vatAmount) + Number(orderDetail.totalAmount)
              ).toFixed(2)
            }}
          </view>
        </view>
        <view class="order-edit">
          <view class="cancel">
            {{ t("Lang_CancellationOfOrder") }}
          </view>
          <view class="upload" @click.stop="uploadImg">
            {{ t("Lang_UploadTransferScreenshot") }}
            <image
              class="upload-img"
              src="/static/images/order/upload.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <!-- <view class="upload-over">
				<image v-for="i in 3" class="upload-over-img" src="/static/images/a.png" mode="widthFix"></image>
			</view> -->
      </view>
      <orderModel ref="order" :title="goods.oe" @prentCheck="() => {}">
        <view class="p_name">
          <view class="img_box">
            <image
              class="img"
              :src="goods.carMakePicture"
              mode="widthFix"
            ></image>
          </view>
          <view class="">
            <view class="">
              {{ goods.label }}
            </view>
            <view class="good-year">
              {{ goods.year }}
            </view>
          </view>
        </view>
        <view class="" style="padding: 10rpx">
          {{ goods.productName }}
        </view>
      </orderModel>
    </view>
  </view>
</template>

<script setup>
import CustmNavBar from "@/components/CustomNavBar/index.vue";
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { OrderAPI } from "@/api";
import orderModel from "./orderModel.vue";
import { upload } from "@/utils/upload";

const { t } = useI18n();
const order = ref();
const orderDetail = ref({});
const goods = ref({});
const address = ref({});
const bg = ref("#127B56");

onMounted(() => {
  queryOrderDetail();
  getRefundInfo();
});
const uploadImg = async () => {
  // return console.log(orderDetail.value);
  let res = await upload();
  let orderReceiverAddress = orderDetail.value.orderReceiverAddress;

  let result = await OrderAPI.orderUpdate({
    orderStatus: orderDetail.value.orderStatus,
    picUrls: [res.msg],
    orderReceiverAddressDto: {
      receiverName: orderReceiverAddress.receiverName,
      receiverPhone: orderReceiverAddress.receiverPhone,
      receiverDetailAddress: orderReceiverAddress.receiverDetailAddress,
    },
    id: orderDetail.value.id,
  });
};

const queryOrderDetail = async () => {
  let res = await OrderAPI.getOrderDetails(uni.getStorageSync("detail-id"));
  orderDetail.value = res.data;
  address.value = res.data.orderReceiverAddress;
};

// 获取退款信息
const getRefundInfo = async (id) => {
  let res = await OrderAPI.getReturnTypeNum({
    orderId: uni.getStorageSync("detail-id"),
    shopId: uni.getStorageSync("shopId"),
  });
  return res.data;
};
const goodsInfo = (data) => {
  goods.value = data;
  order.value.showSwitch(true);
};
</script>

<style lang="scss" scoped>
@import "@/static/css/index.scss";

.ordeer-info {
  background: #fff;
  border-radius: 10rpx;
  margin: 10rpx;
  padding: 10rpx;

  .order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10rpx 10rpx 20rpx;
    border-bottom: 1px solid #f5f5f5;

    .order-num {
      color: #525252;
      flex: 1;
      word-break: break-all;
    }

    .order-status {
      padding: 5rpx 10rpx;
      border-radius: 10rpx;
      color: #fff;
      background-color: #7384fa;
      font-size: 24rpx;
    }
  }

  .order-time {
    padding: 0 10rpx 20rpx;
    color: #979797;

    .order-time-item {
      margin-bottom: 10rpx;
      font-size: 24rpx;

      .time {
        margin-left: 25rpx;
      }
    }
  }
}
.box {
  margin: 10rpx;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
  .paymentInfo {
    display: flex;
    flex-direction: column;
    padding: 20rpx; // 调整内边距
    color: #fff;
    background: #723891;
    border-radius: 3px 3px 0px 0px;
    font-size: 25rpx;
    font-weight: bold;
    .nt {
      font-size: 20rpx;
      font-weight: normal;
    }
  }
  .order-statue-item {
    margin-top: 15rpx;
    padding: 10rpx;
    .order-statue-tip {
      font-size: 22rpx;
      display: flex;
      color: #d0d0d0;
      view {
        flex: 1;
        flex: 1;
      }
    }

    .order-statue-detail {
      background: #eef5f3;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      min-height: 90rpx;
      padding: 0 20rpx;

      .item-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        padding: 0 20rpx;
        box-sizing: border-box;

        .num {
          color: #de9981;
          font-weight: 600;
        }

        .time {
          color: #d0d0d0;
          font-size: 24rpx;
        }

        .img {
          width: 80rpx;
        }
      }

      .icon {
        width: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.head {
  border-radius: 0 0 20rpx 20rpx;
  box-shadow: 0 0 10rpx #ccc;

  .view_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 0 0 20rpx 20rpx;
    padding: 40rpx 20rpx;
    font-size: 28rpx;
  }
}

.p_name {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin: 10rpx;
  display: flex;

  .img_box {
    width: 30%;

    .img {
      width: 90%;
      margin: 0 auto;
      display: block;
    }
  }

  .good-year {
    color: #a6a6a6;
  }
}

.address {
  margin: 20rpx 10rpx;
  background: #fff;
  border-radius: 10rpx;
  padding: 20rpx 10rpx;

  .address_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f6f6f6;
    padding: 10rpx 10rpx 20rpx;
    margin-bottom: 20rpx;

    .title {
      font-size: 28rpx;
    }

    .icon {
      width: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .icon_img {
        width: 100%;
      }
    }
  }

  .address_info {
    display: flex;

    .address_img {
      width: 200rpx;
      height: 200rpx;
      display: flex;
      align-items: center;

      .img {
        max-width: 100%;
        max-height: 100%;
      }
    }

    .address_info_detail {
      flex: 1;
      font-size: 24rpx;

      .postCode {
        padding: 5rpx 10rpx;
        border-radius: 5rpx;
        background: #267a58;
        color: #fff;
        width: fit-content;
        margin-bottom: 20rpx;
      }

      .address_info_item {
        margin-bottom: 10rpx;
      }
    }
  }
}
.returnInfo {
}

.download {
  display: flex;
  align-items: center;

  .download-img {
    width: 60rpx;
  }
}

.goods {
  .goods-item {
    margin-top: 20rpx;

    .goods-tip {
      font-size: 24rpx;
      color: #d0d0d0;
    }

    .goods-detail {
      background: #eef5f3;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      min-height: 90rpx;
      padding: 0 20rpx;

      .goods-info {
        flex: 1;
        padding-right: 10rpx;
        box-sizing: border-box;
        padding: 0 20rpx;

        .top {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;

          .post-code {
          }

          .price {
            color: #e49e85;
            font-size: 22rpx;
          }
        }

        .bottom {
          color: #c1cbca;
          font-size: 20rpx;
        }
      }

      .goods-num {
        width: 40rpx;
        height: 40rpx;
        background: #267a58;
        color: #fff;
        border-radius: 90rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
      }
    }
  }
}

.order-footer {
  background: $primary-b;
  border-radius: 10rpx 10rpx 0 0;
  padding: 40rpx 40rpx;
  color: #fff;

  .footer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .order-edit {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .cancel {
      font-size: 28rpx;
    }

    .upload {
      border: 1px solid #fff;
      border-radius: 5rpx;
      padding: 2px 10rpx;
      display: flex;
      align-items: center;

      .upload-img {
        width: 35rpx;
        margin: 0 10rpx;
      }
    }
  }

  .upload-over {
    display: flex;
    justify-content: flex-end;
    padding: 20rpx;

    .upload-over-img {
      margin-left: 20rpx;
      width: 150rpx;
    }
  }
}
</style>
